<ng-container *ngIf="routeResponse$ | async">
  <ng-container [formGroup]="form">
    <div class="rules d-flex">
      <ng-container *ngIf="form.get('rules').value.length > 1">
        <div class="rules-operator d-flex flex-column justify-content-center">
          <app-toggle
            prefix="rules-operators"
            formControlName="rulesOperator"
            [items]="rulesOperators"
            [uncheckable]="false"
          ></app-toggle>
        </div>

        <div class="brackets"></div>
      </ng-container>

      <div class="rules-list flex-grow-1">
        <ng-container
          formArrayName="rules"
          *ngIf="activeRoute$ | async as activeRoute"
        >
          <div
            *ngFor="
              let rule of form.get('rules')['controls'];
              index as ruleIndex
            "
            class="rule-item"
            [ngClass]="{
              'pt-1': ruleIndex !== 0,
              'pb-1': ruleIndex !== form.get('rules')['controls'].length - 1
            }"
            [formGroupName]="ruleIndex"
            appDraggable
            appDropzone
            dragContainer="route-rules"
            [dragEnabled]="form.get('rules')['controls'].length > 1"
            dragParentId="root"
            [dragIsContainer]="false"
            [dragId]="ruleIndex"
            (dropped)="reorderRules($event)"
          >
            <app-custom-select
              class="overflow-hidden me-2"
              formControlName="target"
              [enableCustomInput]="false"
              [hasCategory]="true"
              [items]="responseRuleTargets"
              [dropdownId]="'rules' + ruleIndex + 'target'"
            ></app-custom-select>

            <div class="me-2">
              <!-- the modifier is disabled for request number, method and path as there is nothing to "explore" (number/string values) -->
              <input
                type="text"
                class="form-control"
                [placeholder]="
                  modifierPlaceholders[
                    form.get(['rules', ruleIndex, 'target']).value
                  ] || ''
                "
                formControlName="modifier"
                [attr.disabled]="
                  form.get(['rules', ruleIndex, 'target']).value ===
                    'request_number' ||
                  form.get(['rules', ruleIndex, 'target']).value === 'path' ||
                  form.get(['rules', ruleIndex, 'target']).value === 'method'
                    ? true
                    : null
                "
              />
            </div>
            <app-toggle
              class="me-2"
              [uncheckable]="true"
              formControlName="invert"
              prefix="rule"
              [items]="rulesInvert"
            ></app-toggle>

            <app-custom-select
              class="me-2"
              formControlName="operator"
              [enableCustomInput]="false"
              [items]="responseRuleOperators"
              [dropdownId]="'rules' + ruleIndex + 'operator'"
              [disabledList]="
                operatorDisablingForTargets[
                  form.get(['rules', ruleIndex, 'target']).value
                ]
              "
            ></app-custom-select>

            <input
              type="text"
              class="form-control"
              [placeholder]="
                valuePlaceholders[
                  form.get(['rules', ruleIndex, 'operator']).value
                ] || ''
              "
              formControlName="value"
              [attr.disabled]="
                form.get(['rules', ruleIndex, 'operator']).value === 'null' ||
                form.get(['rules', ruleIndex, 'operator']).value ===
                  'empty_array'
                  ? true
                  : null
              "
            />

            <button
              *ngIf="deleteRuleRequested$ | async as deleteRuleRequested"
              type="button"
              class="btn btn-link btn-icon delete-rule"
              [ngClass]="{
                'text-danger':
                  deleteRuleRequested.enabled === true &&
                  deleteRuleRequested.payload === ruleIndex
              }"
              [ngbTooltip]="
                deleteRuleRequested.enabled === true &&
                deleteRuleRequested.payload === ruleIndex
                  ? 'Confirm'
                  : 'Delete'
              "
              (click)="removeRule(ruleIndex)"
            >
              <app-svg icon="delete"></app-svg>
            </button>

            <button
              *ngIf="form.get('rules').value.length > 1"
              #dragHandle
              ngbTooltip="Reorder"
              type="button"
              class="btn btn-link btn-icon cursor-grab text-muted"
            >
              <app-svg icon="drag_indicator"></app-svg>
            </button>
          </div>
        </ng-container>
      </div>
    </div>
    <div class="d-flex align-items-center mt-2">
      <button
        type="button"
        class="btn btn-link btn-icon add-rule"
        (click)="addRule()"
      >
        <app-svg icon="add_box" class="text-success pe-2"></app-svg>
        Add rule
      </button>
      <ng-container *ngIf="activeRoute$ | async as activeRoute">
        <div
          *ngIf="rulesDisablingResponseModes.includes(activeRoute.responseMode)"
          class="warning-message ms-auto text-center pe-2"
          id="disabled-rules-warning-message"
        >
          {{ texts.DISABLED_RULES_WARNING }}
        </div>
      </ng-container>
    </div>
  </ng-container>
</ng-container>
